<div data-page="deviceorientation" class="page">
    <!-- Top Navbar-->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="left">
                <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
            </div>
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center">Device Orientation</div>
        </div>
    </div>
    <!-- Scrollable page content -->
    <div class="page-content">
        <div class="content-block">
            <blockquote>This plugin provides access to the device's compass. The compass is a sensor that detects the direction or heading
                that the device is pointed, typically from the top of the device. It measures the heading in degrees from
                0 to 359.99, where 0 is north.
            </blockquote>
        </div>
        <div class="content-block">
            <div class="content-block-inner">
                <h4 class="help"><b>Toggle</b> to stop/start orientation watch.<br><b>Get Current</b> for one-time orientation reading.</h4>
                <div class="row no-gutter">
                    <div class="heading-magnetic col-100">magneticHeading: <span></span></div>
                </div>
                <div class="row no-gutter">
                    <div class="heading-true col-100">trueHeading: <span></span></div>
                </div>
                <div class="row no-gutter">
                    <div class="heading-accuracy col-100">headingAccuracy: <span></span></div>
                </div>
                <div class="row no-gutter">
                    <div class="timestamp col-100">Timestamp: <span></span></div>
                </div>
                <p class="buttons-row">
                    <a href="#" class="button button-fill button-raised btn-toggle">Toggle</a>
                    <a href="#" class="button button-fill button-raised btn-current">Get Current</a>
                </p>
                <p class="buttons-row">
                    <a href="compass.html" class="button button-fill button-raised color-red">Compass</a>
                </p>
            </div>
        </div>
    </div>
</div>